<template>
  <div>
    <ul class="stepsUl">
      <li class="stepsLi" v-for="(item, i) in list" :key="i">
        <div class="stepsItemBox">
          <div class="stepsImgBox">
            <img :src="calUrl(i)" alt="" />
            <div :class="{ stepsItemLine: true, isActive: currentIndex >= i }"></div>
          </div>
          <div class="stepsInfosBox">
            <div class="stepsItemTitleBox">
              <div class="title">{{ item.nodeName }}</div>
            </div>
            <div class="stepsItemDescriptionBox">
              {{ item.nodeUserName }}
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "commonSteps",
  components: {},
  data() {
    return {
      startImg: require("../assets/images/start.png"),
      startImg_active: require("../assets/images/start-active.png"),
      endImg: require("../assets/images/end.png"),
      endImg_active: require("../assets/images/end-active.png"),
      process: require("../assets/images/process.png"),
      process_active: require("../assets/images/end-active.png"),
      currentIndex: 0,
      list: [],
    };
  },
  props: {
    // 横向horizontal和 竖向vertical
    direction: {
      require: false,
      default: "horizontal",
    },
    // 当前节点
    activeStep: {
      require: true,
      type: Number,
    },
    // 流程节点
    stepsList: {
      type: Array,
      require: true,
      default: () => {
        return [
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
        ];
      },
    },
    activeColor: {
      type: String,
    },
    activeIcon: {
      type: String,
      default: "",
    },
    // 当前节点
    currentNode: {
      require: true,
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.calList();
  },
  methods: {
    calList() {
      let list = [];
      this.stepsList.map((item, index) => {
        console.log(this.currentNode)
        if (item.id == this.currentNode.processNodeIdFrom) {
          this.currentIndex = index;
        }
        list.push({
          nodeName: item.nodeName,
        });
      });
      this.list = list;
    },
    calUrl(index) {
      if (index === 0) {
        if (this.currentIndex>=index ) {
          return this.startImg_active;
        }
        return this.startImg;
      } else if (index == this.stepsList.length - 1) {
        if (this.currentIndex >= index) {
          return this.endImg_active;
        }
        return this.endImg;
      } else if (this.currentIndex >= index) {
        return this.process_active;
      } else {
        return this.process;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.stepsUl {
  width: 94%;
  margin: 0 auto;
  .stepsLi {
    display: flex;
    height: 150px;
    justify-content: space-between;
    &:last-child .stepsItemLine {
      display: none;
    }
    .stepsItemBox {
      width: 100%;
      display: flex;
      .stepsImgBox {
        display: flex;
        position: relative;
        margin: 0px 20px 10px 0;
        img {
          width: 90px;
          height: 90px;
        }

        .stepsItemLine {
          height: 100px;
          border-left: 4px dotted #666666;
          position: absolute;
          top: 80px;
          left: 50%;
          z-index: -1;
        }
        .isActive {
          border-left: 4px dotted #2184fe !important;
        }
      }
      .stepsInfosBox {
        flex: 1;
        .stepsItemTitleBox {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .title {
            font-size: 28px;
            color: #333333;
            font-weight: bold;
          }
          .time {
            font-size: 24px;
            color: #666666;
          }
        }
        .stepsItemDescriptionBox {
          color: #666666;
          font-size: 24px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
